<template>
    <view class="container">
        <view class="content">
            <view class="head">待还金额 (元)</view>
            <view class="total">{{Number(total).toFixed(2)}}</view>
            <view class="refunding">还款中：{{Number(refunding).toFixed(2)}}</view>
            <view class="u-flex u-col-center u-margin-top-20">
                <view class="label">还款金额 (元) </view>
                <u-input v-model="money" border placeholder="请输入不超过【待还-还款中】的金额"></u-input>
            </view>
            <view class="u-margin-top-30">
                <u-button type="p" @click="jump2pay">确认付款</u-button>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { onMounted, ref } from 'vue';

const total = ref(0)
const money = ref(0)
const refunding = ref(0)
const id = ref(0)

const jump2pay = () => {
    if (money.value > total.value) {
        money.value = total.value
        uni.$u.toast('自动修改为全部还款,请再点击确认付款!')
        return
    }
    if (money.value == 0 || money.value == 0) {
        uni.$u.toast('请输入还款金额!')
        return
    }
    let para = {
        totalPrice: money.value,
        id: id.value
    }
    uni.$u.$MRouter.creditCheckstand.to({ para: JSON.stringify(para) })
}

onLoad((option: any)=>{
    id.value = JSON.parse(option.para).id
})

onMounted(()=>{
    if (!id.value) {
        console.log('账单ID 不存在,需要重新请求');
        return
    }
    /** 待还金额 */
    uni.$u.$api.CreditApi.querySettlementBillManager({ id: id.value }).then((res: any) => {
        // console.log(res);
        const result = res.records[0]
        total.value = result.unpaidAmount
    })
    /** 查询还款中的金额 */
    uni.$u.$api.CreditApi.queryRefunding({ billId: id.value, approvalStatus: 0 }).then((res: any) => {
        console.log(res);
        refunding.value = res ? res.sumPaidAmount : 0
    })
})

</script>

<style scoped lang="scss">
.container {
        padding: 20rpx;
        line-height: 60rpx;

        .content {
            padding: 20rpx;
            background-color: $uni-bg-color;

            .head {
                font-size: 28rpx;
            }

            .total {
                font-size: 48rpx;
                line-height: 120rpx;
            }

            .refunding {
                font-size: 28rpx;
                color: #666666;
            }

            .label {
                font-size: 28rpx;
            }
        }
    }
</style>
